import { ref } from 'vue'

// 壁纸状态
const currentWallpaper = ref<string>('none')
const opacity = ref<number>(0.7)

// 壁纸列表
const wallpapers = [
  { name: '11.webp', displayName: '抽象艺术' },
  { name: 'wallhaven-42kx94.webp', displayName: '自然风景' },
  { name: 'th.jpeg', displayName: '自然风景' },
  { name: 'th-1.jpeg', displayName: '自然风景' },
  { name: 'th-2.jpeg', displayName: '自然风景' },
].map(file => ({
  name: file.name,
  displayName: file.displayName,
  url: new URL(`../assets/images/bg/${file.name}`, import.meta.url).href
}))

// 应用壁纸
const applyWallpaper = (wallpaperName: string) => {
  // 找到主要内容区域 - 使用更通用的选择器（排除应用首页容器）
  const contentAreas = [
    // 文档页面
    document.querySelector('.doc-tab-content'),
    document.querySelector('.document-detail'),
    // 待办页面
    document.querySelector('.todo-main-content'),
    // 导航页面
    document.querySelector('.navigation-content'),
    // 通用内容区域
    document.querySelector('.main-content'),
    document.querySelector('.content-area')
  ]
  
  const body = document.body
  
  if (wallpaperName === 'none') {
    // 清除页面背景
    body.style.backgroundImage = ''
    body.style.backgroundColor = ''
    
    // 清除所有内容区域背景
    contentAreas.forEach(area => {
      if (area) {
        (area as HTMLElement).style.backgroundImage = ''
        ;(area as HTMLElement).style.backgroundSize = ''
        ;(area as HTMLElement).style.backgroundPosition = ''
        ;(area as HTMLElement).style.backgroundAttachment = ''
        ;(area as HTMLElement).style.backgroundRepeat = ''
      }
    })
    
    // 确保应用首页容器和导航页面容器完全透明
    const transparentContainers = [
      document.querySelector('.apps-container'),
      document.querySelector('.navigation-content-wrapper')
    ]
    transparentContainers.forEach(container => {
      if (container) {
        (container as HTMLElement).style.backgroundImage = ''
        ;(container as HTMLElement).style.backgroundColor = ''
      }
    })
  } else {
    const wallpaper = wallpapers.find(w => w.name === wallpaperName)
    if (wallpaper) {
      // 页面背景：完全展示壁纸（不受透明度影响）
      body.style.backgroundImage = `url('${wallpaper.url}')`
      body.style.backgroundSize = 'cover'
      body.style.backgroundPosition = 'center'
      body.style.backgroundAttachment = 'fixed'
      body.style.backgroundRepeat = 'no-repeat'
      
      // 内容区域背景：带透明度的白色遮罩层（受透明度控制）
      const overlayStyle = `
        linear-gradient(rgba(255, 255, 255, ${1 - opacity.value}), rgba(255, 255, 255, ${1 - opacity.value}))
      `
      
      contentAreas.forEach(area => {
        if (area) {
          (area as HTMLElement).style.backgroundImage = overlayStyle
          ;(area as HTMLElement).style.backgroundSize = 'cover'
          ;(area as HTMLElement).style.backgroundPosition = 'center'
          ;(area as HTMLElement).style.backgroundAttachment = 'fixed'
          ;(area as HTMLElement).style.backgroundRepeat = 'no-repeat'
        }
      })
      
      // 确保应用首页容器和导航页面容器完全透明
      const transparentContainers = [
        document.querySelector('.apps-container'),
        document.querySelector('.navigation-content-wrapper')
      ]
      transparentContainers.forEach(container => {
        if (container) {
          (container as HTMLElement).style.backgroundImage = ''
          ;(container as HTMLElement).style.backgroundColor = ''
        }
      })
      
    }
  }
}

// 初始化壁纸设置
const initWallpaper = () => {
  // 加载保存的壁纸设置
  const savedWallpaper = localStorage.getItem('wallpaper-setting')
  if (savedWallpaper) {
    currentWallpaper.value = savedWallpaper
  }
  
  const savedOpacity = localStorage.getItem('wallpaper-opacity')
  if (savedOpacity) {
    opacity.value = parseFloat(savedOpacity)
  }
  
  // 更新CSS变量
  document.documentElement.style.setProperty('--opacity-main', opacity.value.toString())
  
  // 应用壁纸
  applyWallpaper(currentWallpaper.value)
}

// 更新透明度
const updateOpacity = (value: number) => {
  opacity.value = value
  // 更新CSS变量
  document.documentElement.style.setProperty('--opacity-main', value.toString())
  applyWallpaper(currentWallpaper.value)
  localStorage.setItem('wallpaper-opacity', value.toString())
}

// 更新壁纸
const updateWallpaper = (wallpaperName: string) => {
  currentWallpaper.value = wallpaperName
  applyWallpaper(wallpaperName)
  localStorage.setItem('wallpaper-setting', wallpaperName)
}

export function useWallpaper() {
  return {
    currentWallpaper,
    opacity,
    wallpapers,
    initWallpaper,
    updateOpacity,
    updateWallpaper
  }
}